<!DOCTYPE html>
<html lang="en">
<head>
<title> Responsive Team Cards Flipper - Responsive</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="html.design">
<!-- description -->
<meta name="description" content="Responsive Team Cards Flipper - Template">
<link rel="shortcut icon" href="images/favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<!-- Fonts and icons -->
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700" rel="stylesheet">  -->
<!-- Reset CSS -->
<!-- <link rel="stylesheet" href="css/reset.css"> -->
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive  CSS -->
<!-- <link rel="stylesheet" href="css/responsive.css"> -->
</head>
<body>

<div class="team-main">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<h2 class="title-wb">Responsive Team Cards Flipper</h2>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
				<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
					<div class="flip-team">
						<div class="front-A h-100">
							<div class="card profile-card-5 bor-no" data-image-src="images/team-01.jpg">
								
								<div class="text-content">
									<h3> Laree Crisci </h3>
									<p>CEO Founder</p>
								</div>
								<div class="filter"></div>
							</div>
						</div>
						<div class="back-b h-100">
							<div class="card bor-no">
								<h4 class="card-title"> Laree Crisci </h4>
								<p>CEO Founder</p>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis! </p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
				<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
					<div class="flip-team">
						<div class="front-A h-100">
							<div class="card profile-card-5 bor-no" data-image-src="images/team-02.jpg">
								
								<div class="text-content">
									<h3> Sarah Simon </h3>
									<p>Web Design</p>
								</div>
								<div class="filter"></div>
							</div>
						</div>
						<div class="back-b h-100">
							<div class="card bor-no">
								<h4 class="card-title"> Sarah Simon </h4>
								<p>Web Developer</p>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis! </p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
				<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
					<div class="flip-team">
						<div class="front-A h-100">
							<div class="card profile-card-5 bor-no" data-image-src="images/team-03.jpg">
								
								<div class="text-content">
									<h3> Simon Gamaan </h3>
									<p>Web Design</p>
								</div>
								<div class="filter"></div>
							</div>
						</div>
						<div class="back-b h-100">
							<div class="card bor-no">
								<h4 class="card-title"> Simon Gamaan </h4>
								<p>Web Design</p>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis! </p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="col-lg-3 col-md-6 col-sm-6 col-12">
				<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
					<div class="flip-team">
						<div class="front-A h-100">
							<div class="card profile-card-5 bor-no" data-image-src="images/team-04.jpg">
								
								<div class="text-content">
									<h3> Glen Semmes </h3>
									<p>Web Design</p>
								</div>
								<div class="filter"></div>
							</div>
						</div>
						<div class="back-b h-100">
							<div class="card bor-no">
								<h4 class="card-title"> Glen Semmes </h4>
								<p>Web Design</p>
                                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis! </p>
								
							</div>
						</div>
					</div>
				</div>
			</div>
														
		</div>
	</div>
</div>

<!-- jquery latest version -->
<script src="js/jquery.min.js"></script>
<!-- popper.min.js -->
<script src="js/popper.min.js"></script>    
<!-- bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(".card").css('background', function () {
		var bg = ('url(' + $(this).data("image-src") + ') no-repeat center center');
		return bg;
	});
</script>
</body>
</html>